<template>
    <div>
        <el-container class="is-vertical">
            <BaHeader />
            <el-scrollbar :style="calcHeight(60)" ref="mainScrollbarRef">
                <el-row class="layouts-main" justify="center">
                    <el-col class="layouts-main-col" :span="16" :xs="24">
                        <el-main class="layout-main">
                            <slot />
                        </el-main>
                    </el-col>
                </el-row>
                <BaFooter />
            </el-scrollbar>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import '~/assets/scss/editor.scss'

const mainScrollbarRef = ref()

const route = useRoute()

watch(
    () => route.fullPath,
    () => {
        mainScrollbarRef.value?.scrollTo(0, 0)
    }
)
</script>

<style scoped lang="scss">
.layout-main {
    padding: 0 !important;
    overflow-x: hidden;
}
</style>

<style>
.img-loading-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
